<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "scrollbar": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Scrollbar</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">Scrollbar</h1>
        <p class="td-lead">Documentation and examples for showing custom scrollbar on an element.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">The base scrollbar component must position to relative and have a fix height.</p>

        <div data-label="Example" class="td-example">
          <div id="scroll1" class="pos-relative ht-200 bd bg-gray-100">
            <div class="pd-20">
              <p>Laoreet sed augue, ornare tellus quam, pellentesque tempor non cum, id facilisi dolor. Pede nullam, sed quam, lorem senectus rutrum voluptatem. Ullamcorper vehicula lacinia pede, curabitur eu arcu eleifend gravida vestibulum molestie, habitant turpis eget purus nascetur ullamcorper eget. Et est urna cursus quam nec libero. Est torquent, pede ut arcu ridiculus.</p>
              <p>Turpis a nec nonummy vestibulum mauris sem, sit vitae, in neque suspendisse donec potenti velit erat. Massa aliquam mauris feugiat integer, eget quisque tincidunt lobortis sed euismod, non nam ornare. Ut tristique donec egestas mauris eu orci, eu tempor, donec omnis nonummy et turpis id, purus pulvinar lectus. Elit provident at, donec velit dui. Ante id at aliquam rutrum pharetra, tortor nulla lacus, commodo lectus.</p>
              <p class="mg-b-0">Leo et erat quisque eu aenean ipsum, ridiculus lacus nulla. Mauris nulla, excepteur nam amet. Lacus ac libero mattis. Varius nam, eleifend magna. Purus netus etiam semper, fermentum cras, lorem ipsum eu, malesuada ante tincidunt orci quam vestibulum enim, quis vel pulvinar in. Dapibus maecenas, nullam id neque, nibh nam dolor bibendum nec, tincidunt sit ante mi libero eget sollicitudin. Dictum fringilla sed dui, lacus dolor vehicula fringilla ut integer cursus. Rutrum lorem aliquam nec, morbi volutpat. Condimentum sollicitudin elit tortor elementum eget, lorem sapien ante. Eget aperiam, arcu eget vestibulum, mauris a suspendisse metus, pharetra risus feugiat vestibulum praesent lacinia dignissim, justo nonummy.</p>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div id=&quot;scroll1&quot; class=&quot;pos-relative ht-200 bd&quot;&gt;
  &lt;div class=&quot;pd-20&quot;&gt;
    &lt;!-- any content goes here... --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
        <pre><code class="language-js">const scroll1 = new PerfectScrollbar('#scroll1', {
  suppressScrollX: true
});</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Thinner Scrollbar</h4>
        <p class="mg-b-30">Thinner scrollbar component variation by using class <code>.scrollbar-sm</code>.</p>

        <div data-label="Example" class="td-example">
          <div id="scroll2" class="scrollbar-sm pos-relative ht-200 bd bg-gray-100">
            <div class="pd-20">
              <p>Laoreet sed augue, ornare tellus quam, pellentesque tempor non cum, id facilisi dolor. Pede nullam, sed quam, lorem senectus rutrum voluptatem. Ullamcorper vehicula lacinia pede, curabitur eu arcu eleifend gravida vestibulum molestie, habitant turpis eget purus nascetur ullamcorper eget. Et est urna cursus quam nec libero. Est torquent, pede ut arcu ridiculus.</p>
              <p>Turpis a nec nonummy vestibulum mauris sem, sit vitae, in neque suspendisse donec potenti velit erat. Massa aliquam mauris feugiat integer, eget quisque tincidunt lobortis sed euismod, non nam ornare. Ut tristique donec egestas mauris eu orci, eu tempor, donec omnis nonummy et turpis id, purus pulvinar lectus. Elit provident at, donec velit dui. Ante id at aliquam rutrum pharetra, tortor nulla lacus, commodo lectus.</p>
              <p class="mg-b-0">Leo et erat quisque eu aenean ipsum, ridiculus lacus nulla. Mauris nulla, excepteur nam amet. Lacus ac libero mattis. Varius nam, eleifend magna. Purus netus etiam semper, fermentum cras, lorem ipsum eu, malesuada ante tincidunt orci quam vestibulum enim, quis vel pulvinar in. Dapibus maecenas, nullam id neque, nibh nam dolor bibendum nec, tincidunt sit ante mi libero eget sollicitudin. Dictum fringilla sed dui, lacus dolor vehicula fringilla ut integer cursus. Rutrum lorem aliquam nec, morbi volutpat. Condimentum sollicitudin elit tortor elementum eget, lorem sapien ante. Eget aperiam, arcu eget vestibulum, mauris a suspendisse metus, pharetra risus feugiat vestibulum praesent lacinia dignissim, justo nonummy.</p>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div id=&quot;scroll2&quot; class=&quot;scrollbar-sm pos-relative ht-200 bd&quot;&gt;
  &lt;div class=&quot;pd-20&quot;&gt;
    &lt;!-- any content goes here... --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Thicker Scrollbar</h4>
        <p class="mg-b-30">Thicker scrollbar component variation by using class <code>.scrollbar-lg</code>.</p>

        <div data-label="Example" class="td-example">
          <div id="scroll3" class="scrollbar-lg pos-relative ht-200 bd bg-gray-100">
            <div class="pd-20">
              <p>Laoreet sed augue, ornare tellus quam, pellentesque tempor non cum, id facilisi dolor. Pede nullam, sed quam, lorem senectus rutrum voluptatem. Ullamcorper vehicula lacinia pede, curabitur eu arcu eleifend gravida vestibulum molestie, habitant turpis eget purus nascetur ullamcorper eget. Et est urna cursus quam nec libero. Est torquent, pede ut arcu ridiculus.</p>
              <p>Turpis a nec nonummy vestibulum mauris sem, sit vitae, in neque suspendisse donec potenti velit erat. Massa aliquam mauris feugiat integer, eget quisque tincidunt lobortis sed euismod, non nam ornare. Ut tristique donec egestas mauris eu orci, eu tempor, donec omnis nonummy et turpis id, purus pulvinar lectus. Elit provident at, donec velit dui. Ante id at aliquam rutrum pharetra, tortor nulla lacus, commodo lectus.</p>
              <p class="mg-b-0">Leo et erat quisque eu aenean ipsum, ridiculus lacus nulla. Mauris nulla, excepteur nam amet. Lacus ac libero mattis. Varius nam, eleifend magna. Purus netus etiam semper, fermentum cras, lorem ipsum eu, malesuada ante tincidunt orci quam vestibulum enim, quis vel pulvinar in. Dapibus maecenas, nullam id neque, nibh nam dolor bibendum nec, tincidunt sit ante mi libero eget sollicitudin. Dictum fringilla sed dui, lacus dolor vehicula fringilla ut integer cursus. Rutrum lorem aliquam nec, morbi volutpat. Condimentum sollicitudin elit tortor elementum eget, lorem sapien ante. Eget aperiam, arcu eget vestibulum, mauris a suspendisse metus, pharetra risus feugiat vestibulum praesent lacinia dignissim, justo nonummy.</p>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div id=&quot;scroll3&quot; class=&quot;scrollbar-lg pos-relative ht-200 bd&quot;&gt;
  &lt;div class=&quot;pd-20&quot;&gt;
    &lt;!-- any content goes here... --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Custom Color</h4>
        <p class="mg-b-30">Custom color scrollbar component variation by using class <code>.scrollbar-primary</code> and <code>.scrollbar-dark</code> only. You can add more colors in <code>scss/lib/_scrollbar.scss</code>.</p>

        <div data-label="Example" class="td-example">
          <div id="scroll4" class="scrollbar-primary pos-relative ht-200 bd bg-gray-100 mg-b-25">
            <div class="pd-20">
              <p>Laoreet sed augue, ornare tellus quam, pellentesque tempor non cum, id facilisi dolor. Pede nullam, sed quam, lorem senectus rutrum voluptatem. Ullamcorper vehicula lacinia pede, curabitur eu arcu eleifend gravida vestibulum molestie, habitant turpis eget purus nascetur ullamcorper eget. Et est urna cursus quam nec libero. Est torquent, pede ut arcu ridiculus.</p>
              <p>Turpis a nec nonummy vestibulum mauris sem, sit vitae, in neque suspendisse donec potenti velit erat. Massa aliquam mauris feugiat integer, eget quisque tincidunt lobortis sed euismod, non nam ornare. Ut tristique donec egestas mauris eu orci, eu tempor, donec omnis nonummy et turpis id, purus pulvinar lectus. Elit provident at, donec velit dui. Ante id at aliquam rutrum pharetra, tortor nulla lacus, commodo lectus.</p>
              <p class="mg-b-0">Leo et erat quisque eu aenean ipsum, ridiculus lacus nulla. Mauris nulla, excepteur nam amet. Lacus ac libero mattis. Varius nam, eleifend magna. Purus netus etiam semper, fermentum cras, lorem ipsum eu, malesuada ante tincidunt orci quam vestibulum enim, quis vel pulvinar in. Dapibus maecenas, nullam id neque, nibh nam dolor bibendum nec, tincidunt sit ante mi libero eget sollicitudin. Dictum fringilla sed dui, lacus dolor vehicula fringilla ut integer cursus. Rutrum lorem aliquam nec, morbi volutpat. Condimentum sollicitudin elit tortor elementum eget, lorem sapien ante. Eget aperiam, arcu eget vestibulum, mauris a suspendisse metus, pharetra risus feugiat vestibulum praesent lacinia dignissim, justo nonummy.</p>
            </div>
          </div>

          <div id="scroll5" class="scrollbar-dark pos-relative ht-200 bd bg-gray-100">
            <div class="pd-20">
              <p>Laoreet sed augue, ornare tellus quam, pellentesque tempor non cum, id facilisi dolor. Pede nullam, sed quam, lorem senectus rutrum voluptatem. Ullamcorper vehicula lacinia pede, curabitur eu arcu eleifend gravida vestibulum molestie, habitant turpis eget purus nascetur ullamcorper eget. Et est urna cursus quam nec libero. Est torquent, pede ut arcu ridiculus.</p>
              <p>Turpis a nec nonummy vestibulum mauris sem, sit vitae, in neque suspendisse donec potenti velit erat. Massa aliquam mauris feugiat integer, eget quisque tincidunt lobortis sed euismod, non nam ornare. Ut tristique donec egestas mauris eu orci, eu tempor, donec omnis nonummy et turpis id, purus pulvinar lectus. Elit provident at, donec velit dui. Ante id at aliquam rutrum pharetra, tortor nulla lacus, commodo lectus.</p>
              <p class="mg-b-0">Leo et erat quisque eu aenean ipsum, ridiculus lacus nulla. Mauris nulla, excepteur nam amet. Lacus ac libero mattis. Varius nam, eleifend magna. Purus netus etiam semper, fermentum cras, lorem ipsum eu, malesuada ante tincidunt orci quam vestibulum enim, quis vel pulvinar in. Dapibus maecenas, nullam id neque, nibh nam dolor bibendum nec, tincidunt sit ante mi libero eget sollicitudin. Dictum fringilla sed dui, lacus dolor vehicula fringilla ut integer cursus. Rutrum lorem aliquam nec, morbi volutpat. Condimentum sollicitudin elit tortor elementum eget, lorem sapien ante. Eget aperiam, arcu eget vestibulum, mauris a suspendisse metus, pharetra risus feugiat vestibulum praesent lacinia dignissim, justo nonummy.</p>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div id=&quot;scroll4&quot; class=&quot;scrollbar-primary pos-relative ht-200 bd&quot;&gt;
  &lt;div class=&quot;pd-20&quot;&gt;
    &lt;!-- any content goes here... --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Thinner Scrollbar</a>
            <a href="#section3" class="nav-link">Thicker Scrollbar</a>
            <a href="#section4" class="nav-link">Custom Color</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    @@include('./_script.html',{})

    <script>
      $(function(){
        'use strict'

        const scroll1 = new PerfectScrollbar('#scroll1', {
          suppressScrollX: true
        });

        const scroll2 = new PerfectScrollbar('#scroll2', {
          suppressScrollX: true
        });

        const scroll3 = new PerfectScrollbar('#scroll3', {
          suppressScrollX: true
        });

        const scroll4 = new PerfectScrollbar('#scroll4', {
          suppressScrollX: true
        });

        const scroll5 = new PerfectScrollbar('#scroll5', {
          suppressScrollX: true
        });


      });
    </script>
  </body>
</html>
